<template>
	<view>
		<uni-drawer :visible="visibleDrawer" mode="right" @close="closeDrawer()">
			<view class="drawer-list">
				<block v-for="(item, index) in menuList" :key="index">
					<!-- 单选、多选  isMutiple是否支持多选-->
					<view v-if="item.type === 'custom' && item.detailList.length">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
							<text v-if="item.detailList.length>showLenght"
								@tap="showMore(index)">{{item.showMoreList ? '收起' : '更多'}}</text>
						</view>
						<view class="draer-list-con">
							<template v-if="!item.showMoreList">
								<text v-if="idx<showLenght" v-for="(textItem, idx) in item.detailList" :key="idx"
									:class="textItem.isSelected ? 'on' : ''"
									@tap="itemTap(idx,item.detailList,item.key, item.isMutiple)">
									{{textItem.title}}
								</text>
							</template>
							<template v-else>
								<text v-for="(textItem, idx) in item.detailList" :key="idx"
									:class="textItem.isSelected ? 'on' : ''"
									@tap="itemTap(idx,item.detailList,item.key, item.isMutiple)">
									{{textItem.title}}
								</text>
							</template>
						</view>
					</view>
					<!-- 积分区间 -->
					<view v-if="item.type === 'pointInterval'">
						<view class="drawer-list-title flex justify-between">
							<view>
								{{item.title}}
							</view>
						</view>
						<view class="dateContent">
							<input type="number" v-model="minNumber" class="date-item" @blur="numberInput($event,'minNumber')" />
							<view class="date-line"></view>
							<input type="number" v-model="maxNumber" :disabled="disabled" class="date-item" @blur="numberInput($event,'maxNumber')" />
						</view>
					</view>
				</block>

				<view class="filter-content-footer flex justify-center">
					<tui-button class="btn" type="black" :plain="true" width="240rpx" height="80rpx" :size="32"
						shape="circle" @tap="resetClick">重置</tui-button>
					<tui-button class="btn" type="danger" width="240rpx" height="80rpx" :size="32" shape="circle"
						@tap="sureClick">确定</tui-button>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	/***
	 * 筛选组件，当前支持多选、单选
	 * item.type (custom 单选、多选、rangetime 时间范围带时分秒、range 时间范围不带时分秒、rangenumber 数字范围)
	 * item.isMutiple 是否支持多选
	 * 筛选后返回格式{"listName1":[value,value](多选),"listName2":"value"（单选）,...}
	 * rangenumber形式-可能为["",1]或[1,""]表示只有一个最大值或最小值
	 ***/
	import uniDrawer from '@/packageD/components/uni-drawer/uni-drawer.vue';
	import tuiButton from '@/components/button/button';
	export default {
		props: {
			list: {
				required: true,
				type: Array,
				default () {
					return [];
				},
			},
			color: {
				type: String,
				default: '#EA655E',
			},
			disabled: {
				type: Boolean,
				default: false,
			}
		},
		components: {
			uniDrawer,
			tuiButton,
		},
		created() {
			this.resetResult();
			uni.getSystemInfo({
				success: (res) => {
					let windowHeight = res.windowHeight;
					// #ifdef H5
					windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body
						.clientHeight || res.windowHeight;
					// #endif
					this.drawerHeight = (windowHeight - uni.upx2px(120)) + 'px';
				}
			});
		},
		computed: {
			defaultSelectedObj() { // 保存初始状态
				return this.getSelectedObj()
			},
			selectedObj: {
				get() {
					return this.getSelectedObj()
				},
				set(newObj) {
					return newObj;
				}
			},
			menuList() {
				return this.list;
			}
		},
		data() {
			return {
				visibleDrawer: false,
				menuKey: 1,
				showLenght: 6,
				drawerHeight: '500px',
				selectDetailList: [],
				result: {},
				showPicker: false,
				datetime: '',
				beginDate: '',
				endDate: '',
				dateType: 'rangetime',
				dateValue: '',
				minNumber: '',
				maxNumber: '',

			};
		},

		methods: {
			getSelectedObj() {
				return this.commonResultObj();
			},
			resetResult() {
				this.result = this.commonResultObj();
			},
			commonResultObj() {
				let obj = {};
				this.menuList.map((item) => {
					switch (item.type) {
						case "custom":
							item.isMutiple ? obj[item.key] = [] : obj[item.key] = '';
							break;
						case 'range':
						case 'rangetime':
						case 'rangenumber':
							obj[item.key] = []
							break;
						default:
							obj[item.key] = '';
					}
				})
				return obj;
			},
			//筛选项选中或取消
			itemTap(index, list, key, isMutiple) {
				console.log(22222222)
				if (isMutiple == true) {
					list[index].isSelected = !list[index].isSelected;
					if (list[index].isSelected) {
						this.selectedObj[key].push(list[index].value);
					} else {
						list[index].isSelected = false;
						var idx = this.selectedObj[key].indexOf(list[index].value);
						this.selectedObj[key].splice(idx, 1);
					}
					this.result[key] = this.selectedObj[key];
				} else {
					this.result[key] = list[index].isSelected ? '' : list[index].value;
					for (let i = 0; i < list.length; i++) {
						if (index == i && !list[i].isSelected) {
							list[i].isSelected = true
						} else {
							list[i].isSelected = false
						}
					}
				}
				this.$forceUpdate();
				// // #ifdef H5
				// this.$forceUpdate();
				// // #endif
			},
			sureClick() {
				let str_result = {};
				let hasChoose = false;
				for (let key in this.result) {
					if (typeof this.result[key] == 'object') {
						str_result[key] = this.result[key].join(',');
						if (!hasChoose) {
							hasChoose = this.result[key].join(',') !== '' ? true : false;
						}
					} else {
						str_result[key] = this.result[key];
						if (!hasChoose) {
							hasChoose = this.result[key] !== '' ? true : false;
						}
					}
				}
				this.$emit("result", this.result);
			},
			resetClick() {
				this.minNumber = '';
				this.maxNumber = '';
				if (this.beginDate) {
					this.beginDate = '';
				}
				if (this.endDate) {
					this.endDate = '';
				}
				for (let key in this.result) {
					if (typeof this.result[key] === 'object') {
						this.selectedObj[key] = [];
						this.result[key] = [];
					} else {
						this.result[key] = '';
					}
				}
				for (let i = 0; i < this.menuList.length; i++) {
					if (this.menuList[i].type === 'custom') {
						for (let j = 0; j < this.menuList[i].detailList.length; j++) {
							this.menuList[i].detailList[j].isSelected = false;
						}
					}
				}
				this.$forceUpdate();
				// // #ifdef H5
				// this.$forceUpdate();
				// // #endif
			},
			closeDrawer() {
				this.visibleDrawer = false;
			},

			showMore(index) {
				this.menuList[index].showMoreList = !this.menuList[index].showMoreList;
				++this.menuKey;
				this.$forceUpdate();
				// // #ifdef H5
				// this.$forceUpdate();
				// // #endif
			},

			onShowDatePicker(type, key) { //显示
				this.dateType = type;
				this.dateValue = this[type];
				this.showPicker = true;
				this.tempKey = key;
			},
			numberInput(event,key) {
				this.result[key] = this[key];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.justify-between {
		justify-content: space-between;
	}

	view,
	scroll-view,
	swiper,
	button,
	input,
	textarea,
	label,
	navigator,
	image {
		box-sizing: border-box;
	}

	/* 筛选样式 */
	.drawer-list {
		padding: 40rpx 32rpx 120rpx;
		font-size: 26rpx;
		width: 100%;
		height: 100vh;
		color: #111111;
		overflow: hidden;
		position: relative;
	}

	input {
		font-size: 26rpx;
	}

	.drawer-list .drawer-list-title {
		font-size: 32rpx;
		line-height: 48rpx;
		margin-top: 50rpx;
		font-weight: 500;
	}

	.drawer-list .drawer-list-title>text {
		font-size: 26rpx;
		color: #666666;
	}

	.drawer-list .draer-list-con>text {
		font-size: 28rpx;
		display: inline-block;
		width: 156rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #F2F2F2;
		border-radius: 16px;
		border: 1px solid #F2F2F2;
		margin: 16rpx 30rpx 8rpx 0;

		&.on {
			border: 1px solid #EA655E;
			background: #FFF2F1;
			color: #EA655E;
		}
	}

	.drawer-list .draer-list-con>text:nth-child(3n) {
		margin-right: 0rpx;
	}

	.filter-content-footer {
		position: absolute;
		left: 0;
		bottom: calc(constant(safe-area-inset-bottom) + 80rpx);
		bottom: calc(env(safe-area-inset-bottom) + 80rpx);
		width: 100%;
		padding: 0 48rpx 8rpx;
		display: flex;
		justify-content: space-between;
	}

	.picker {
		z-index: 99999 !important;
	}

	.dateContent {
		width: 100%;
		height: 68rpx;
		margin: 16rpx 0 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.date-item {
			width: 240rpx;
			height: 68rpx;
			line-height: 68rpx;
			background: #F6F6F6;
			border-radius: 34rpx;
			text-align: center;
		}

		.date-line {
			width: 24rpx;
			height: 4rpx;
			background-color: #666666;
			margin: 0 16rpx;
		}

	}

	.rangenumber-content {
		&>text {
			display: inline-block;
			width: 10%;
			text-align: center;
			height: 64rpx;
			line-height: 64rpx;
		}

		.rangenumber-input {
			width: 45%;
			display: inline-block;
			padding: 0 12rpx;
		}
	}

	.m-input {
		height: 64rpx;
		line-height: 64rpx;
	}

	::v-deep .picker {
		z-index: 999;
	}
</style>
